<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="f" %>  
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>云+-房屋详情信息</title>
<link rel="stylesheet" href="lib/amazeui/assets/css/amazeui.css" />
<link rel="stylesheet" href="lib/sliderPro/slider-pro.min.css" />
<link rel="stylesheet" href="css/hp.css" />
<link rel="stylesheet" href="css/move.css" />
<script src="lib/amazeui/assets/js/jquery.min.js"></script>
<script src="lib/amazeui/assets/js/amazeui.js"></script>
<script src="lib/sliderPro/jquery.sliderPro.min.js"></script>

<!--   <script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=AyI4O6S4sfPiP2gGaoGBAQq6Uy25Xt8Y"></script>   -->
</head>
<script type="text/javascript" src="js/zxx.drag.1.0.js"></script>
<body>
	<div class="hp-container">
		<!--  导航-->
		<%@include file="/WEB-INF/page/layout_front/navigation.jsp"%><!--静态包含-->

		<div class="hp-detail-body am-container" style="">
			<div class="am-u-sm-12">
				<div class="am-u-sm-10" style="margin-left: -163px;">
					<!-- 房屋标题-区域 -->
					<div class="hp-detail-mark-area">
						<div class="am-g">
							<span class="hp-detail-title">${house.title }</span>
						</div>
						<div class="am-g hp-detail-title-address">
							<span><span>${house.city.name }</span> ></span> <span>${house.street.name }</span>
						</div>
					</div>
					<!-- 房屋图片-区域 -->
					<div class="hp-detail-imgs-area">
						<div id="slider-pro" class="slider-pro">
							<div id="sp_slides_id" class="sp-slides">
							   <c:forEach items="${viewList }" var="item">
								<div class="sp-slide">
									<img class="sp-image" src="${imgPath }${item.img_url }" />
								</div>
								</c:forEach>
							</div>
							<div id="sp_thumbnails_id" class="sp-thumbnails">
							     <c:forEach items="${viewList }" var="item">
								 <img class="sp-thumbnail" src="${imgPath }${item.img_url }" />
								 </c:forEach>
							</div>
						</div>
					</div>
					<!-- 房屋信息介绍-区域 -->
					<div class="hp-detail-info-area">
						<div class="am-cf hp-info-box">
							<div class="am-fl" style="width: 122px;">
								<div class="box-title">
									<i class="hp-icon-fwsm"></i>
									<p>房屋说明</p>
								</div>
							</div>
							<div class="am-fl" style="width: 600px;">
								<div class="hp-box-content">
									<span>${house.mark }</span>
								</div>
							</div>
						</div>

					</div>
					<div class="hp-detail-info-area">
						 <div class="am-cf hp-info-box">
							<div class="am-fl">
								<div class="box-title">
									<i class="hp-icon-ptss"></i>
									<p>配套设施</p>
								</div>
							</div>
							<div class="am-fl">
								<div class="hp-box-content" style="width: 600px;">
									<span>${house.mating }</span><br />
								</div>
							</div>
						</div>

					</div>
					<div class="hp-detail-info-area">
						<div class="am-cf hp-info-box">
							<div class="am-fl">
								<div class="box-title">
									<i class="hp-icon-jtqk"></i>
									<p>交通情况</p>
								</div>
							</div>
							<div class="am-fl">
								<div class="hp-box-content" style="width: 600px;">
									<span>${house.traffic }</span>
								</div>
							</div>
						</div>
					</div>

					<div class="am-g">
						<div id="allmap"
							style="width: 737px; height: 500px; margin-top: 10px;"></div>
					</div>

					<div class="hp-comment-area">

						<div class="am-g hp-comment-area-top">
							<div id="btn-down-page" class="hp-comment-area-top-mark">评论</div>
						</div>
						<div id="tall_about"></div>

						<div class="am-g hp-comment-item">
							<textarea placeholder="填写评论" class="" style="width: 600px;" rows="5" id="doc-ta-1"></textarea>
							<c:if test="${userinfo==null }">
							<a href="loginAction_loginPage.hp" class="am-btn am-btn-danger" style="margin-top: 50px; margin-left: 20px;">登录</a>
							</c:if>
							<c:if test="${userinfo!=null }">
							<a id="publish_review" class="am-btn am-btn-danger" style="margin-top: 50px; margin-left: 20px;">发表</a>
							</c:if>
						</div>

					</div>

				</div>
				<div class="am-u-sm-2 hp-detail-price-area">
					<div class="hp-detail-price">
						<div class="am-g">
							<span class="price-span">${house.price }/${house.price_unit }
							</span>
						</div>
						<div class="am-g">
							<div class="hp-price-btn">
								<button id="order_save" type="button" class="am-btn am-btn-danger am-btn-block">立即预订</button>
							</div>
						</div>
						<div class="am-g">
							<div class="">
								<div class=" hp-img-person">
									<img width="200px" height="200px" src="${house.user.img_url }" />
								</div>
								<div class="hp-name">
									<p class="name">${house.user.name }</p>
								</div>
							</div>
						</div>
						<div class="am-g hp-im-chat">
							<input type="button" value="开启在线聊天" class="am-btn am-btn-danger am-btn-block" onclick="fun(this)">
						</div>
					</div>
				</div>

			</div>
		</div>

		<!-- <div style="margin-bottom: 100px;"></div> -->
	</div>
	<div id="box_id" class="box" style="display: none;">
	<div id="main" class="main">
    	<div id="bar_id" class="bar" align="right" onclick="fun(this)">在线聊天</div>
        <div id="content" class="content">
		    <div id="message" style="height: 200px;width: 400px;border: 1px solid; overflow: auto;"></div>
		    <input id="messagetext" type="text" style="width: 300px"/>
		    <button onclick="send()">发送</button>
		    <button id='close' onclick="closeWebSocket();">Close</button>
        </div>
	  </div>
	 </div>
	 <script type="text/javascript">
	 var wsPath='${wsPath}';
      var websocket = null;
      //var nickName = document.getElementById('nickName').value;
      var nickName = "${userinfo.name}";
      

      //判断当前浏览器是否支持WebSocket
      if('WebSocket' in window){
          websocket = new WebSocket(wsPath+"/websocket");
      }
      else{
          alert('Not support websocket')
      }

      websocket.onerror = WSonError;

      websocket.onopen = WSonOpen;

      websocket.onmessage = WSonMessage;

      websocket.onclose = WSonClose;  

      window.onbeforeunload = WSonBeforeUnload;

      function setMessageInnerHTML(innerHTML){
          document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }
      function WSonOpen(){
          setMessageInnerHTML("成功进入聊天室");
      }
      function WSonError(){
          setMessageInnerHTML("发生错误");
      }
      function WSonMessage(event){
          setMessageInnerHTML(event.data);
          $("#messagetext").val("");
          console.log(event.data);
      }
      function WSonClose(){
          setMessageInnerHTML("退出聊天室");
      }

      function closeWebSocket(){
          websocket.close();
      }
      function WSonBeforeUnload(){
          websocket.close();
      }
      function send(){
          var message = document.getElementById('messagetext').value;
          if (nickName=="") {
        	  nickName="游客";
    	}
          websocket.send(nickName + ':' +message);
      }

  </script>
	  <script type="text/javascript">
window.onload = function(){
	var oBox = document.getElementById("box_id");
	var oBar = document.getElementById("bar_id");
	startDrag(oBar, oBox);
};
</script>
<script type="text/javascript">
	function fun(obj){
    var div = document.getElementById("box_id");
    if(obj.value=="关闭在线聊天"){
        div.style.display = "none";
        obj.value = "开启在线聊天";
    } else {
        div.style.display = "block";
        obj.value = "关闭在线聊天";
    }
};
</script>
	<script type="text/javascript">
		// 房屋轮播图片
		$('#slider-pro').sliderPro({
			width : 737, //宽度
			height : 420, //高度
			fade : true, //是否使用淡入淡出效果
			arrows : true, //是否显示箭头导航按钮
			fadeArrows : false, //是否在鼠标滑过时淡入淡出显示箭头按钮
			buttons : false, //是否插件圆点导航按钮
			thumbnailArrows : true, //设置缩略图的箭头按钮是否可用
			fadeThumbnailArrows : false, //缩略图的箭头按钮是否淡入淡出
			autoplay : false, //设置幻灯片是否自动播放   
			autoplayDelay:5000,//设置幻灯片自动播放的时间间隔，单位毫秒 默认值：5000 
		});

		// 百度地图API功能
	  	/* var map = new BMap.Map("allmap");
		var point = new BMap.Point(116.331398, 39.897445);
		map.centerAndZoom(point, 12);
		// 创建地址解析器实例
		var myGeo = new BMap.Geocoder();
		// 将地址解析结果显示在地图上,并调整地图视野
		myGeo.getPoint("武汉光谷步行街", function(point) {
			if (point) {
				map.centerAndZoom(point, 16);
				var myIcon = new BMap.Icon(
						"http://developer.baidu.com/map/jsdemo/img/fox.gif",
						new BMap.Size(300, 157));
				//var marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注
				var marker = new BMap.Marker(point); // 创建标注
				map.addOverlay(marker);
				marker.enableDragging(); //开启拖拽
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				var label = new BMap.Label("隐无为", {
					offset : new BMap.Size(150, 0)
				});
				marker.setLabel(label);

			} else {
				alert("您选择地址没有解析到结果!");
			}
		}, "武汉市");  */
	</script>
	<script type="text/javascript">
	$(function() {
		//评论
		$.ajax({url : "reviewAction_queryByHouseId.hp",
				data : {"house.id" : "${house.id}","pageNum":"","pageSize":"5"},
				type : "post",
				dataType : "json",
				success : function(json) {
						//  局部刷新  table  var item 
						var html = "";
						$("#tall_about").html('');
						$.each(json.list,function(index, item) {
						var tr = '<div class="am-g hp-comment-item"><div class="am-u-sm-2">'
								+ '<img width="80px" height="80px" src="'+item.user.img_url+'" class="am-circle" /> <span class="hp-comment-name">'
								+ item.user.name
								+ '</span>'
								+ '</div><div class="am-u-sm-10"> <div><span class="hp-comment-time">'+item.date+ '</span><br />'
								+ '<span>'
								+ item.mark
								+ '</span></div></div></div>';
						html += tr;
					})
						$("#tall_about").append(html);
					},
					error : function() {
						alert("服务器有误,请联系管理员")
					}
				});
		$("#publish_review").click(function(){
			var  todate = new Date().pattern("yyyy-MM-dd hh:mm:ss");  
			var  doc_ta_1 = $("#doc-ta-1").val(); 
			 $.ajax({
					url: "reviewAction_ajaxSave.hp",
					data: {"house.id":"${house.id}",
						   "user.id":"${userinfo.id}",
						   "date":todate,
						   "mark":doc_ta_1 },
					type: "post",
					dataType: "json",
					success: function(json) {
						$("#doc-ta-1").val('');
						$("#doc-ta-1").attr('placeholder',"你的评论正在审核ing");
						var json_html = '<div class="am-g hp-comment-item"><div class="am-u-sm-2">'
							+ '<img width="80px" height="80px" src=" ${userinfo.img_url} " class="am-circle" /> <span class="hp-comment-name"> ${userinfo.name}</span>'
							+ '</div><div class="am-u-sm-10"> <div><span class="hp-comment-time">'+todate+ '</span><br />'
							+ '<span>'
							+ doc_ta_1
							+ '</span></div></div></div>';
						$("#tall_about").append(json_html);
						$("#doc-ta-1").attr('placeholder',"添加评论");
					},
					error: function() {
						alert("保存失败,请联系管理员")
					}
				});
		});
		Date.prototype.pattern=function(fmt) {         
		    var o = {         
		    "M+" : this.getMonth()+1, //月份         
		    "d+" : this.getDate(), //日         
		    "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时         
		    "H+" : this.getHours(), //小时         
		    "m+" : this.getMinutes(), //分         
		    "s+" : this.getSeconds(), //秒         
		    "q+" : Math.floor((this.getMonth()+3)/3),      
		    "S" : this.getMilliseconds() //毫秒         
		    };         
		    var week = {         
		    "0" : "/u65e5",         
		    "1" : "/u4e00",         
		    "2" : "/u4e8c",         
		    "3" : "/u4e09",         
		    "4" : "/u56db",         
		    "5" : "/u4e94",         
		    "6" : "/u516d"        
		    };         
		    if(/(y+)/.test(fmt)){         
		        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));         
		    }         
		    if(/(E+)/.test(fmt)){         
		        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);         
		    }         
		    for(var k in o){         
		        if(new RegExp("("+ k +")").test(fmt)){         
		            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));         
		        }         
		    }         
		    return fmt;         
		}  
		//轮播图片
		/* $.ajax({
			url: "imgArrAction_queryByHouseId.hp",
			data: {"house.id" : "${house.id}"},
			type: "post",
			dataType: "json",
			success: function(json) {
				//  局部刷新  table  var item
				var slides_html="";//轮播图
				//var thumbnails_html="";//缩略图
				$("#sp_slides_id").html('');
				$("#sp_thumbnails_id").html('');
				
				$.each(json.viewList,function(index,item){
					var sp_slides_id_div='<div class="sp-slide sp-selected" data-index="'+index+'" data-init="true"   data-loaded="true"><div class="sp-image-container"  ><img class="sp-image" src="'+item.imgUrl+'" data-default="'+item.imgUrl+'"  /></div></div>';
					//废弃var sp_slides_id_div='<div class="sp-slide" "><img class="sp-image" src="'+item.imgUrl+'" ></img></div>';
					//var sp_thumbnails_id_div='<img class="sp-thumbnail" src="'+item.imgUrl+'" ></img>';
					slides_html+=sp_slides_id_div;
					//thumbnails_html=thumbnails_html+sp_thumbnails_id_div;
				})
				$("#sp_slides_id").append(slides_html);
				//$("#sp_thumbnails_id").append(thumbnails_html);
			},
			error: function() {
				alert("服务器有误2,请联系管理员")
			}
		}); */
		
	});
	</script>
	<script type="" src="js/date.pattern.js"></script>
	
	<script type="text/javascript">
	
	$("#order_save").click(function(){
		var  todate = new Date().pattern("yyyy-MM-dd hh:mm:ss");
		$.ajax({
			url: "orderAction_ajaxSave.hp",
			data: {"house.id":"${house.id}",
				   "user.id":"${userinfo.id}",
				   "date_start":todate},
			type: "post",
			dataType: "json",
			success: function(json) {
				alert("订单提交成功")
			},
			error: function() {
				alert("订单提交失败,请联系管理员")
			}
		});
	});
	</script>  
</body>

</html>
